<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs :list="tabList" @change="tabChange" />
			</template>
			<!-- 患者随访列表 -->
			<view class="con_box" v-for="(item,index) in dataList" :key="item.id" v-if="userType=='sysPatientEntity'">
				<view class="text_con">
					<view class="title">
						<view class="titleText">{{formatData(item.followTime)}}随访单</view>
					</view>

					<!-- <view class="desc">
						 {{item.desc}}
					</view> -->
					<view class="button">
						<view class="smallButton" v-if="tabIndex==0">
							<button class="cu-btn round sm bg-blue"
								@click.stop="gotoAdd(item.id,item.patientId,'edit')">去填单</button>
						</view>
						<view class="smallButton" v-else>
							<button class="cu-btn round sm bg-blue"
								@click.stop="gotoAdd(item.id,item.patientId,'look')">查看详情</button>
						</view>
						<view class="addtime">{{formatTime(item.followTime)}}</view>
					</view>
				</view>
			</view>
			<!-- 医护列表 -->
			<view class="con_box" v-for="(item,index) in dataList" :key="item.id" v-if="userType=='sysUserEntity'">
				<view class="text_con">
					<view class="title">
						<view class="titleText">{{formatData(item.followTime)}}【{{item.patientName}}】随访单</view>
					</view>

					<!-- <view class="desc">
						 {{item.desc}}
					</view> -->
					<view class="button">
						<view class="smallButton" v-if="tabIndex==0">
							<button class="cu-btn round sm bg-blue"
								@click.stop="gotoAdd(item.id,item.patientId,'edit')">随访跟进</button>
							<button class="cu-btn round sm bg-blue" @tap="showModal($event,item.id)"
								data-target="DialogModal1">随访结束</button>

						</view>
						<view class="smallButton" v-else>
							<button class="cu-btn round sm bg-blue"
								@click.stop="gotoAdd(item.id,item.patientId,'look')">查看详情</button>
						</view>
						<view class="addtime">{{formatTime(item.followTime)}}</view>
					</view>
				</view>
			</view>
			<template #bottom>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg" @click="gotoAdd('',userInfo.id,'edit')"
						v-if="userType=='sysPatientEntity'">发起随访单</button>
					<button class="cu-btn bg-blue lg" @click="gotoPatientInfoList()"
						v-if="userType=='sysUserEntity'">发起随访单</button>
				</view>
			</template>
		</z-paging>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">结束随访</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定结束当前患者随访吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="overHandle()">确定</button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		toast
	} from '../../utils/utils';
	export default {
		data() {
			return {
				modalName: null,
				dataList: [],
				tabList: ['待办', '已办'],
				tabIndex: 0,
				finishId: ""
			}
		},
		async onLoad() {
			//获取用户信息
			await this.getUserInfo();
			//判断用户身份是患者还是医护
			this.refreshList();
		},
		onShow() {

		},
		onReady() {


		},
		methods: {
			showModal(e, id) {
				console.log(e)
				console.log(id)
				this.modalName = e.currentTarget.dataset.target;
				this.finishId = id
			},
			hideModal(e) {
				this.modalName = null
			},
			refreshList() {
				this.$refs.paging.reload();
			},
			formatData(dateStr) {
				if (!dateStr) {
					return ""
				}
				const date = new Date(dateStr.replace(/-/g, '/'));
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}年${month}月${day}日`;
			},
			formatTime(isoString) {
				// 使用Date对象解析字符串
				const date = new Date(isoString.replace(/-/g, '/'));

				// 使用slice方法获取时分秒部分
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');

				// 返回格式化后的时分秒
				return `${hours}:${minutes}:${seconds}`;
			},
			//随访结束
			async overHandle() {
				console.log(this.finishId)
				if (!this.finishId) {
					return;
				}
				try {
					let res = await this.$api.finishFollow(this.finishId);
					toast("随访已结束");
					this.hideModal();
					this.refreshList();
				} catch (e) {
					toast("随访结束失败")
				}
			},
			gotoAdd(id, patientId,pageType) {
				console.log(patientId)
				//患者
				if (this.userType == 'sysPatientEntity') {
					let url = "/pages/index/add/add" + "?id=" + id + "&patientId=" + patientId+"&pageType="+pageType
					uni.navigateTo({
						url: url
					})
				}
				//医护
				if (this.userType == 'sysUserEntity') {
					let url = "/pages/index/add/addByYiHu" + "?id=" + id + "&patientId=" + patientId+"&pageType="+pageType
					uni.navigateTo({
						url: url
					})
				}

			},
			gotoPatientInfoList() {
				uni.navigateTo({
					url: "/pages/patient/patient"
				})
			},
			gotoChat() {
				uni.navigateTo({
					url: "/pages/index/chat/chat"
				})
			},
			tabChange(index) {
				this.tabIndex = index;
				console.log(this.tabIndex)
				this.$refs.paging.reload(true);
			},
			queryList(pageNo, pageSize) {
				if (!this.hasLogin()) {
					return
				}
				if (!this.userType) {
					return;
				}
				let params = {
					page: pageNo,
					limit: pageSize
				}
				//患者
				if (this.userType == 'sysPatientEntity') {
					params.type = this.tabIndex + 1;
					this.$api.getPatientList(params).then(res => {
						if (res.code == 0) {
							this.$refs.paging.complete(res.page.list);
						} else {
							this.$refs.paging.complete(false);
						}
					})
				}
				//医护 /sys/patientFollow/listPc
				if (this.userType == 'sysUserEntity') {
					params.status = this.tabIndex;
					this.$api.getPatientListByYiHu(params).then(res => {
						if (res.code == 0) {
							this.$refs.paging.complete(res.page.list);
						} else {
							this.$refs.paging.complete(false);
						}
					})
				}


			}
		}
	}
</script>
<style lang="scss">
	.con_box {
		display: flex;
		flex-direction: nowarp;
		height: 150rpx;
		margin: 20rpx 15rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.photo {
			width: 240rpx;
			height: 150rpx
		}

		.photo image {
			width: 240rpx;
			height: 150rpx
		}

		.text_con {
			flex: 1;
			margin-left: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 38rpx;
				margin-bottom: 26rpx;

				.titleText {
					font-weight: bold;
				}
			}

			.desc {
				color: #a8a6a6;
				min-height: 72rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2;
				/** 显示的行数 **/
			}

			.button {
				margin-top: 20rpx;

				.smallButton {
					display: flex;
					flex-direction: row;

					button {
						margin-right: 10rpx;
					}
				}

				.addtime {
					color: #a8a6a6;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				display: flex;
				justify-content: space-between;
				flex-direction: row-reverse;
			}
		}


	}
</style>
